<!--批量作废对话框-->
<template>
	<a-modal v-bind="options">
		<div class="ant-modal-confirm-body">
			<question-circle-outlined />
			<span class="ant-modal-confirm-title">{{ bills.length === 1 ? '作废' : '批量作废' }}</span>
			<div class="ant-modal-confirm-content">
				<a-typography-paragraph v-if="bills.length > 1">共选中{{ bills.length }}条账单，确定要作废吗</a-typography-paragraph>
				<a-typography-paragraph v-else-if="bills.length === 1">确定要作废【{{ bills[0].payerName }}】的账单吗？</a-typography-paragraph>
				<a-form ref="formRef" :model="entity" @finish="submitBatchInvalid">
					<a-form-item name="abandonReason" :rules="[{required: true, message: '请输入作废原因'}]">
						<a-textarea v-model:value="entity.abandonReason" placeholder="请输入作废原因" :maxlength="200" show-count />
					</a-form-item>
					<br />
					<div class="text-right">
						<a-space>
							<a-button @click="options.onCancel">取消</a-button>
							<a-button type="primary" html-type="submit" :loading="loadings.save">确定</a-button>
						</a-space>
					</div>
				</a-form>
			</div>
		</div>
	</a-modal>
</template>

<script lang="ts" setup>
	import {reactive, ref, toRef} from 'vue'
	import {financeBillAbandonFinanceBatch} from '@/api/bill'
	import {FormInstance, message} from 'ant-design-vue'
	import {QuestionCircleOutlined} from '@ant-design/icons-vue'

	const props = defineProps<{
		visible: boolean
		bills: any[]
	}>()

	const loadings = reactive({
		save: false
	})

	const formRef = ref<FormInstance>()
	const emits = defineEmits(['update:visible', 'close'])
	const options = reactive({
		footer: false,
		centered: true,
		closable: false,
		maskClosable: false,
		destroyOnClose: true,
		class: 'ant-modal-confirm-confirm',
		visible: toRef(props, 'visible'),
		onCancel() {
			emits('close')
			emits('update:visible', false)
			formRef.value?.resetFields()
		}
	})

	const entity = reactive<any>({
		// 账单ID集合
		ids: [],
		// 作废原因
		abandonReason: null
	})

	const submitBatchInvalid = () => {
		loadings.save = true

		entity.ids = props.bills.map(o => o.id)
		financeBillAbandonFinanceBatch(entity)
			.then(() => {
				options.onCancel()
				message.success('作废成功')
			})
			.finally(() => (loadings.save = false))
	}
</script>
